<!-- Order Section -->
<section id="order" class="order">
	<!-- Overlay -->
	<div class="overlay overlay-3"></div>
	<!-- Overlay End -->
	<!-- Container -->
	<div class="container">
		<div class="spacer spacer-25"></div>
		<!-- Section Heading -->
		<div class="section-heading white">
			<h1>Đặt hàng</h1>
		</div>
		<!-- Section Heading End -->
		<!-- Section Content Wrapper -->
		<div class="section-content-wrapper">
			<!-- Section Content -->
			<div class="section-content">
				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-default">
							<div class="panel-body panel-body-nopadding">

								<!-- BASIC WIZARD -->
								<div id="validationWizard" class="basic-wizard">

									<ul class="nav nav-pills nav-justified">
										<li><a href="#vtab1" data-toggle="tab"><span>Bước 1:</span> Chọn <?= $cata_name ?></a></li>
										<li><a href="#vtab2" data-toggle="tab"><span>Bước 2:</span> Chọn mẫu</a></li>
										<li><a href="#vtab3" data-toggle="tab"><span>Bước 3:</span> Thông tin</a></li>
									</ul>

									<form class="form" id="formOrder" method="post" action="" enctype="multipart/form-data">
										<input type="hidden" name="idImageRemove" value="" id="idImageRemove">
										<div class="progress progress-striped active">
											<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
										</div>

										<div class="tab-content">

											<div class="tab-pane" id="vtab1">
												<div class="productSlider">
													<?php
													foreach ($product as $itemP) {
														?>
														<div class="item">
															<a href="javascript:void(0)" class="thumbnail">
																<img data-src="holder.js/270x340" alt="<?= $itemP['pro_title'] ?>">
																<div class="thumbnailOpacity">
																	<p><?= $itemP['pro_title'] ?></p>
																</div>
															</a>
															<input type="radio" name="product" required>
														</div>
														<?php
													}
													?>
												</div>
											</div>
											<div class="tab-pane" id="vtab2">

												<div class="modelSlider">
													<?php
													foreach ($case as $itemC) {
														?>
														<div class="item">
															<a href="javascript:void(0)" class="thumbnail">
																<img data-src="holder.js/270x340" alt="<?= $itemC['case_title'] ?>">
																<div class="thumbnailOpacity">
																	<p><?= $itemC['case_title'] ?></p>
																</div>
															</a>
															<input type="checkbox" class="form-control" name="model[]">
														</div>
														<?php
													}
													?>
												</div>

												<div class="form-group">
													<input id="uploadFile" type="file" multiple=true accept="image/*" name="imageProduct[]" data-show-upload="false" data-show-caption="true" data-overwrite-initial="false">
												</div>

											</div>

											<div class="tab-pane" id="vtab3">

												<div class="panel-body">
													<div class="row">
														<div class="col-lg-4">
															<input type="text" class="form-control" placeholder="Tên đầy đủ" name="order-fullname" id="orderFullname" title="Vui lòng điền họ và tên đầy đủ" required>
														</div>
														<div class="col-lg-4">
															<input type="email" class="form-control" placeholder="Email" name="order-email" id="orderEmail" title="Vui lòng điền thư điện tử" required>
														</div>
														<div class="col-lg-4">
															<input type="text" class="form-control" placeholder="Điện thoại" name="order-phone" id="orderPhone" title="Vui lòng điền số điện thoại" required>
														</div>
													</div><!-- row -->
													<div class="row">
														<div class="col-lg-12">
															<input type="text" class="form-control" placeholder="Địa chỉ giao hàng" name="order-address" id="orderAddress" title="Vui lòng điền địa chỉ giao hàng" required>
														</div>
													</div><!-- row -->
													<textarea placeholder="Ghi chú" name="order-note" rows="5" class="form-control"></textarea>
												</div>

											</div>

										</div><!-- tab-content -->
									</form>

									<ul class="pager wizard">
										<li class="previous"><a href="javascript:void(0)">Quay lại</a></li>
										<li class="next"><a href="javascript:void(0)">Tiếp tục</a></li>
									</ul>

								</div><!-- #validationWizard -->

							</div><!-- panel-body -->
						</div><!-- panel -->
					</div><!-- col-md-12 -->
				</div>
			</div>
			<!-- Section Content End -->
		</div>
		<!-- Section Content Wrapper End -->
		<div class="spacer spacer-50"></div>
	</div>
	<!-- Container End -->
</section>
<!-- Order Section End -->